var arts;
var init = false;
var loading;
var container;
var year = [
    '1970',
    '1970-1988',
    '1989-1990'
];
var size = [
    '0-50',
    '50-80',
    '80-90',
    '90-120',
    '120-200',
    '2000-3000',
];
$(function () {
    arts = new Vue({
        el:'#artsController',
        data:{
            search:{
                collect:'',
                view:'',
                year:'',
                size:'',
                keyword:'',
                years:[],
                sizes:[],
                keywords:[]
            },
            keywords:[],
            years:[],
            sizes:[],
            arts:[],
            page:1,
            level:_level,
            userId:_userId,
            hasData:true,
            busy:false
        },
        methods:{
            loadData:function () {
                var that = this;
                // if (!page){
                //     page = 1;
                // }
                // that.page = page;
                // if (page == 1){
                //     that.arts = [];
                // }
                that.busy = true;
                sy.post('/web/art/list',{
                    sortView:that.search.view,
                    sortFocus:that.search.collect,
                    keyword:_keyword,
                    page:that.page,
                    limit:20,
                    type:that.search.keywords.join(','),
                    year:that.search.years.join(','),
                    size:that.search.sizes.join(',')
                },function (data) {
                    // that.page++;
                    data = data.data;
                    if (data){
                        for (var i = 0; i < data.length; i++){
                            var item = data[i];
                            item.page = that.page;
                        }
                        that.arts = that.arts.concat(data);
                        if (data.length < 20){
                            that.hasData = false;
                        }
                        Vue.nextTick(function () {
                            var $newElems = $('.'+that.page+'page').appendTo(container);
                            $newElems.imagesLoaded(function(){
                                $newElems.animate({ opacity: 1},800);
                                container.masonry( 'appended', $newElems,true);
                                if (that.hasData){
                                    that.page ++;
                                    that.busy = false;
                                    loading.data("on",true).fadeOut();
                                }else{
                                    loading.text('就有这么多了！')
                                }
                            });
                        });
                    }
                })
            },
            jump:function(item){
                location.href = sy.path+'/web/art/'+item.id;
            },
            reloadData:function () {
              this.page = 1;
              this.arts = [];
              container.masonry( 'destory');
              this.init();
              this.loadData();
            },
            loadKeywords:function () {
                var that = this;
                sy.postApi('/api/artLibrary/getGoodsTypeList',{},function (data) {
                    that.keywords = data;
                })
            },
            loadYears:function () {
                var that = this;
                sy.postApi('/api/artLibrary/goodsLibraryListType',{type:1},function (data) {
                    if (data){
                        $.each(data,function(i,o){
                            var str = o.minYear+'-'+o.maxYear;
                            that.years.push(str);
                        });
                    }

                })
            },
            loadSizes:function () {
                var that = this;
                sy.postApi('/api/artLibrary/goodsLibraryListType',{type:2},function (data) {
                    if (data){
                        $.each(data,function(i,o){
                            var str = o.minArea+'-'+o.maxArea;
                            that.sizes.push(str);
                        });
                    }

                })
            },
            selectKeyword:function (id) {
                this.search.keyword = id;
                if (id){
                    if (this.checkData(this.search.keywords,id)){
                        this.search.keywords.remove(id);
                    }else{
                        this.search.keywords.push(id);
                    }
                }else{
                    this.search.keywords = [];
                }

                this.reloadData();
            },
            selectSize:function (size) {
                this.search.size = size;
                if (size){
                    if (this.checkData(this.search.sizes,size)){
                        this.search.sizes.remove(size);
                    }else{
                        this.search.sizes.push(size);
                    }
                }else{
                    this.search.sizes = [];
                }

                this.reloadData();
            },
            selectYear:function (year) {
                this.search.year = year;
                if (year){
                    if (this.checkData(this.search.years,year)){
                        this.search.years.remove(year);
                    }else{
                        this.search.years.push(year);
                    }
                }else{
                    this.search.years = [];
                }

                this.reloadData();
            },
            selectCollect:function (type) {
                this.search.collect = type;
                this.reloadData();
            },
            selectView:function (type) {
                this.search.view = type;
                this.reloadData();
            },
            checkData:function (arrs,year) {
                for (var i = 0; i < arrs.length; i++){
                    if (arrs[i] == year){
                        return true;
                    }
                }
                return false;
            },

            scroll:function () {
                var that = this;
                $(window).scroll(function(){
                    if(!loading.data("on")) return;
                    // 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求
                    var itemNum=$('#waterfull').find('.item').length;
                    var itemArr=[];
                    itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                    itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                    itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
                    var maxTop=Math.max.apply(null,itemArr);
                    if(maxTop<$(window).height()+$(document).scrollTop()){
                        //加载更多数据
                        loading.data("on",false).fadeIn(800);
                        if (!that.busy){
                            that.loadData();
                        }
                    }
                })
            },
            init:function () {
                tores();
                container = $('.waterfull ul');
                loading=$('#imloading');
                // 初始化loading状态
                loading.data("on",true);
                container.imagesLoaded(function(){
                    container.masonry({
                        columnWidth: 320,
                        itemSelector : '.item',
                        isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
                        isAnimated: true,//是否采用jquery动画进行重拍版
                        isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                        isResizable: true,//是否自动布局默认true
                        animationOptions: {
                            duration: 800,
                            easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
                            queue: false//是否队列，从一点填充瀑布流
                        }
                    });
                });
                this.scroll();
            }
        },
        created:function () {
            this.loadKeywords();
            this.loadData();
            this.loadYears();
            this.loadSizes();
        },
        mounted:function () {
            this.init();
        },
        updated:function () {

        }
    });
})
